import React, { PropTypes } from 'react';
import TweenOne from 'rc-tween-one';

import {Icon, Switch, Popover, Table, Button,Select, Modal, Form, Input,InputNumber, message,Radio, Row, Col, DatePicker, Cascader,Upload,} from 'antd';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;

import '../../less/info.less';
import '../../less/shops.less';

import { connect } from 'react-redux';
import { closeMask } from '../../../action/mask';

const areaData = [{
  value: 'shanghai',
  label: '上海',
  children: [{
    value: 'shanghaishi',
    label: '上海市',
    children: [{
      value: 'pudongxinqu',
      label: '浦东新区',
    }],
  }],
}];

const props = {
  action: '/upload.do',
  listType: 'picture',
  defaultFileList: [{
    uid: -1,
    name: 'xxx.png',
    status: 'done',
    url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
    thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
  }, {
    uid: -2,
    name: 'yyy.png',
    status: 'done',
    url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
    thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
  }],
};

class AddCashierPage extends React.Component {
  constructor(props){
    super(props);
    this.state = {

    }
  }

  componentDidMount(){

  }

  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div className="formContainer" form={this.props.form} style={{width:700}}>
        <div className="fromHead">
          <span className="title">编辑信息</span>
          <span className="option">
            <span>保存</span>
            <span onClick={()=>{this.props.closeMask()}}>关闭</span>
          </span>
        </div>
        <Form horizontal className="ant-advanced-search-formT">
          <Row>
            <Col span={12}>
              <FormItem
                label="商品名称"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                required
              >
                <Input placeholder="请输入区域" size="default"/>
              </FormItem>
              <FormItem
                label="进价"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                required
              >
                <InputNumber placeholder="请输入进价" size="default" step={0.01} addonAfter={<span>元</span>}/>
              </FormItem>
              <FormItem
                label="商品码"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                required
              >
                <Input placeholder="请输入商品码" size="default"/>
              </FormItem>
              <FormItem
                label="上架类型"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                required
              >
                <Input placeholder="请输入优惠比例" size="default"/>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                label="商品类别"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                required
              >
                <Input placeholder="请输入定金金额" size="default"/>
              </FormItem>
              <FormItem
                label="原价"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                required
              >
                <InputNumber placeholder="请输入原价" size="default" step={0.01}/>
              </FormItem>
              <FormItem
                label="数量"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
              >
                <InputNumber placeholder="请输入数量" size="default"/>
              </FormItem>
              <FormItem
                label="挂牌价"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                required
              >
                <InputNumber placeholder="请输入挂牌价" size="default" step={0.01}/>
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem
                label="公司资质"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 14 }}
              >
                <Input type="textarea" placeholder="每个关键词最长为15个字符，必须以“,”(逗号)为分隔符" autosize={{ minRows: 3, maxRows: 5 }}/>
              </FormItem>
              <FormItem
                label="商品详情"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 14 }}
              >
                <Input type="textarea" placeholder="每个关键词最长为15个字符，必须以“,”(逗号)为分隔符" autosize={{ minRows: 3, maxRows: 5 }}/>
              </FormItem>
              <FormItem
                label="seo关键词"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 14 }}
              >
                <Input type="textarea" placeholder="每个关键词最长为15个字符，必须以“,”(逗号)为分隔符" autosize={{ minRows: 3, maxRows: 5 }}/>
              </FormItem>
              <FormItem
                label="seo描述"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 14 }}
              >
                <Input type="textarea" placeholder="每个关键词最长为15个字符，必须以“,”(逗号)为分隔符" autosize={{ minRows: 3, maxRows: 5 }}/>
              </FormItem>
              <FormItem
                label="购买须知"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 14 }}
              >
                <Input type="textarea" placeholder="每个关键词最长为15个字符，必须以“,”(逗号)为分隔符" autosize={{ minRows: 3, maxRows: 5 }}/>
              </FormItem>
              <FormItem
                label="附件上传"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 14 }}
              >
                <Upload {...props}>
                  <Button type="ghost">
                    <Icon type="upload" /> 上传
                  </Button>
                </Upload>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    )
  }
}

AddCashierPage = Form.create()(AddCashierPage);

const mapStateToProps = (state) => {
  return {
    maskStatus: state.mask.maskStatus
  }
}

export default connect(
  mapStateToProps,
  { closeMask }
)(AddCashierPage)
